import "./index.scss"
import React, { useEffect } from 'react'
// import { Map, } from 'react-bmapgl';
import { Icon } from 'react-vant'
import axios from "axios"
function MapPage(props) {

  useEffect(() => {
    var map = new window.BMapGL.Map("container");
    // 创建地图
    var point = new window.BMapGL.Point(121.50, 31.23);
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别 
    var scaleCtrl = new window.BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new window.BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    var citys = ['黄浦区', '卢湾区', '徐汇区', '长宁区', '静安区', '普陀区', '虹口区',
      '杨浦区', '闵行区', '宝山区', '嘉定区', '浦东新区', '松江区', '青浦区', '奉贤区', '崇明县'];
    var bdary = new window.BMapGL.Boundary();
    bdary.get('上海市', function (rs) {
      //绘制行政区
      map.clearOverlays();
      var count = rs.boundaries.length;
      if (count === 0) {
        alert("未能获取到当前的行政区域");
        return
      }
      var pointArray = [];
      for (var i = 0; i < count; i++) {
        var ply = new window.BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 1, strokeColor: "#90c8f1" });//建立多边形覆盖物

        map.addOverlay(ply);;

        pointArray = pointArray.concat(ply.getPath());
      }
      map.setViewport(pointArray); //调整视野
      //绘制带高度的点
      var cityGeo = new window.BMapGL.Geocoder();
      for (let i = 0; i < citys.length; i++) {
        cityGeo.getPoint(citys[i], function (point) { // 地址解析获取对应经纬度
          let opts = {
            position: new window.BMapGL.Point(point.lng, point.lat), // 指定文本标注所在的地理位置
          };
          var label = new window.BMapGL.Label(`<p>${citys[i]}</p><p>${i}</p>`, opts);
          // 自定义文本标注样式
          label.setStyle({
            width: "40px",
            height: "40px",
            lineHeight: 0.5,
            display: "inline-block",
            position: "absolute",
            borderRadius: '100%',
            background: "rgba(12,181,106,.9)",
            color: "#fff",
            border: "2px solid hsla(0,0%,100%,.8)",
            textAlign: "center",
            cursor: "pointer"
          });



          // 添加鼠标事件
          label.addEventListener('mouseover', function (e) {
            e.target.setFillColor('#f00');
          });
          label.addEventListener('mouseout', function (e) {
            e.target.setFillColor('#23BB78');
          })
          label.addEventListener('click', async function (e) {
            alert('click!');
            let res = await axios.get(`https://api-haoke-web.itheima.net/area/map?id=${1}`)
            console.log(res);
          })
          map.addOverlay(label);
        });
      }
    })

  }, [])
  return (
    <div className='mapview'>
      <div className="top">
        <Icon name="arrow-left" onClick={() => { props.history.go(-1) }} />
        <span>地图找房</span>
      </div>
      <div id="container">
        {/* <Map ref={ref => { this.map = ref.map }} style={{ width: "100%", height: '100%' }} center={{ lng: 121.477937, lat: 31.236799 }} zoom="11"> */}
        {/* <Marker position={{ lng: 121.477937, lat: 31.236799 }} /> */}
        {/* <NavigationControl /> */}
        {/* <InfoWindow position={{ lng: 121.477937, lat: 31.236799 }} /> */}
        {/* </Map> */}
      </div>
    </div >
  )
}



export default MapPage